
var galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
});

var galleryTop = new Swiper('.gallery-top', {
    // spaceBetween: 10,
    thumbs: {
      swiper: galleryThumbs
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  });

  //滚动左边不动 滚出再动 
  $(window).on("scroll",function() {
    if(parseInt($(document).scrollTop())>300){
        $(".window-container").css({
          "position":"fixed",
          "top":"-58px",
        })
    }
     if(parseInt($(document).scrollTop())>=1850){
      $(".window-container").css({
        "position":"absolute",
        "top":"1800px"
      })
    }

    if(parseInt($(document).scrollTop())<=300){
      $(".window-container").css({
        "position":"absolute",
        "top":"200px"
      })
    }
});


$(".color-selector-info").on("click",function () {
    $(this).parents("label").siblings("label").children(".color-selector-info").css({
      "border":"1px solid #d2d2d7",
      "box-shadow":"none"
    })
    $(this).css({
      "border":"1px solid #1d1d1f",
      "box-shadow":"0 0 0px 3px rgb(193, 223, 254)"
    })
})

$(".iphone-selector").on("click",function () {
  $(this).siblings(".iphone-selector").css({
    "border":"1px solid #d2d2d7",
    "box-shadow":"none"
  })
  $(this).css({
    "border":"1px solid #1d1d1f",
    "box-shadow":"0 0 0px 3px rgb(193, 223, 254)"
  })
})


//放大镜

$('.goods-img-l').mouseover(function (e) {
  $('.magnifier-screen').css('display', 'block');
  $('.magnifier').css('display', 'block');
})

//鼠标在商品图中移动时 
$('.goods-img-l').mousemove(function(e){
  // console.log(1);
  $(this).css('cursor','move');
  var pageX = e.pageX;
  var pageY = e.pageY;
   // 获取商品图窗口在整个文档中的偏移位置
   var offsetX = $('.goods-img-l').offset().left;
   var offsetY = $('.goods-img-l').offset().top;
     // 计算鼠标在商品图中的相对位置
    var relativeX = pageX - offsetX;
    var relativeY = pageY - offsetY;

    //除以2是为了让鼠标再放大镜中心
    var magOffsetX = $('.magnifier').width() / 2;
    var magOffsetY = $('.magnifier').height() / 2;
    // console.log(relativeX - magOffsetX,relativeY - magOffsetY);
    $('.magnifier').css({ left: relativeX - magOffsetX + 'px',
        top: relativeY - magOffsetY + 'px' });
    // 获取放大镜框的新位置
    var magX = $('.magnifier').position().left;
    var magY = $('.magnifier').position().top;
        //越界情况
        // 确定边界

        //让放大镜到边界时有撞击效果 有一段阻止
    var maxMagX = $('.goods-img-l').width() - $('.magnifier').width()
 
    var maxMagY = $('.goods-img-l').height() - $('.magnifier').height()
        // 左边界
    if (magX <= 0) { $('.magnifier').css('left', '0px'); }
        // 右边界
    if (magX >= maxMagX) { $('.magnifier').css('left', maxMagX + 'px'); }
        // 上边界
    if (magY <= 0) { $('.magnifier').css('top', '0px'); }
        // 下边界
    if (magY >= maxMagY) { $('.magnifier').css('top', maxMagY + 'px'); }
        // 三、其次实现大图窗口中的图片随放大镜框的移动而相应移动
        // 按照之前确定的缩放比例移动大图窗口中的图片
        //  图片的移动方向与鼠标的移动方向相反的
            var originX = magX * 1.5;
            var originY = magY *1.5;
            $('.magnifier-screen img').css({ left: -originX + 'px', top: -originY + 'px' });
        })



    $('.goods-img-l').mouseout(function(){
      $('.magnifier').css('display','none');
      $('.magnifier-screen').css('display','none');
    })    